<template>
  <div class="config-base" v-loading="loading">
    <el-form label-position="top" :model="formData" ref="formRef">
      <el-form-item prop="site_name" label="公司名称" :rules="[{ required: true, message: '输入公司名称', trigger: 'blur' }]">
        <el-input v-model="formData.site_name" placeholder="输入公司名称" style="width: 40%" />

        <div style="width: 100%; font-size: 12px; color: red">
          *建议最多输入8个字符，超出字符在logo部分不显示！
        </div>
      </el-form-item>
      <el-form-item label="公司LOGO" :rules="[
        { required: true, message: '上传公司LOGO', trigger: 'change' },
      ]">
        <div class="img-box" v-for="(item, i) in imgList" :key="i">
          <img :src="item.url" alt="" />

          <div class="occlusion">
            <el-icon class="del" @click="handleRemove(i)">
              <IEpDelete />
            </el-icon>
          </div>
        </div>
        <el-upload action="#" list-type="picture-card" :auto-upload="false" :show-file-list="false" :file-list="imgList"
          :on-change="onChange">
          <el-icon>
            <IEpPlus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="小程序LOGO" :rules="[
        { required: true, message: '上传小程序LOGO', trigger: 'change' },
      ]">
        <div class="img-box" v-for="(item, i) in wxList" :key="i">
          <img :src="item.url" alt="" />

          <div class="occlusion">
            <el-icon class="del" @click="wxHandleRemove(i)">
              <IEpDelete />
            </el-icon>
          </div>
        </div>
        <el-upload action="#" list-type="picture-card" :auto-upload="false" :show-file-list="false" :file-list="wxList"
          :multiple="false" :limit="1" :on-change="onWxChange">
          <el-icon>
            <IEpPlus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { uploadImgApi } from "@/plugins/api/upload";
import { configAddApi } from "@/plugins/api/system/config";
import { configApi } from "@/plugins/api/login";
import { useCounterStore } from "@/stores/counter.js";
const store = useCounterStore();

let formData = ref({});
// 商城logo
let siteLogo = ref("");
let imgList = ref([]);
let loading = ref(false);
function onChange(file) {
  let formData = new FormData();
  formData.append("file", file.raw);
  loading.value = true;
  uploadImgApi(formData)
    .then((data) => {
      let obj = {
        url: import.meta.env.VITE_APP_BASE_API + data.file_url,
      };
      siteLogo.value = data.file_url;
      if (imgList.value.length > 0) {
        imgList.value = [];
        imgList.value.push(obj);
      } else {
        imgList.value.push(obj);
      }
      loading.value = false;
      //
    })
    .catch(() => {
      loading.value = false;
    });
}
function handleRemove(index) {
  imgList.value.splice(index, 1);
  siteLogo.value = null;
}
// 小程序logo
let wxList = ref([]);
let wxLogo = ref("");
function onWxChange(file) {
  let formData = new FormData();
  formData.append("file", file.raw);
  loading.value = true;
  uploadImgApi(formData)
    .then((data) => {
      let obj = {
        url: import.meta.env.VITE_APP_BASE_API + data.file_url,
      };
      wxLogo.value = data.file_url;
      if (wxList.value.length > 0) {
        wxList.value = [];
        wxList.value.push(obj);
      } else {
        wxList.value.push(obj);
      }
      loading.value = false;
      //
    })
    .catch(() => {
      loading.value = false;
    });
}
function wxHandleRemove(index) {
  wxList.value.splice(index, 1);
  wxLogo.value = null;
}
//
let formRef = ref(null);

function submit() {
  if (!formRef.value) return;
  formRef.value.validate((valid, fields) => {
    if (valid) {
      let arr = [
        {
          conf_name: "base.site_name",
          conf_value: formData.value.site_name,
        },
        {
          conf_name: "base.site_logo",
          conf_value: siteLogo.value,
        },
        {
          conf_name: "wechat.shop_logo",
          conf_value: wxLogo.value,
        },
      ];
      loading.value = true;
      configAddApi(arr)
        .then(() => {
          ElMessage.success("提交成功！");
          getConfigApi();
          loading.value = false;
        })
        .catch(() => {
          loading.value = false;
        });
    }
  });
}
function getConfigApi() {
  configApi({
    conf_name: "base.site_name",
  }).then((data) => {
    store.configInfo = data.base;
    localStorage.setItem("manpu_config", JSON.stringify(data.base));
    formData.value.site_name = data.base.site_name;
    //
    siteLogo.value = data.base.site_logo;
    imgList.value = [];
    imgList.value.push({
      url: import.meta.env.VITE_APP_BASE_API + data.base.site_logo,
    });
    //
    wxLogo.value = data.base.site_logo;
    wxList.value = [];
    wxList.value.push({
      url: import.meta.env.VITE_APP_BASE_API + data.wechat.shop_logo,
    });
    //
    document.title = data.base.site_name;
  });
}
onMounted(() => {
  getConfigApi();
});
</script>
<style lang="scss" scoped>
.config-base {
  width: 100%;
  height: 100%;

  .img-box {
    display: inline-block;
    margin-right: 5px;
    // margin-bottom: 10px;
    width: 148px;
    position: relative;

    img {
      width: 100%;
      height: 140px;
      object-fit: cover;
    }

    .occlusion {
      display: none;
      width: 100%;
      height: 140px;
      background: #9e9c9c75;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
      text-align: center;

      .del {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        line-height: 148px;
        color: #464444;
        cursor: pointer;
        font-size: large;

        &:hover {
          color: rgb(130, 131, 133);
        }
      }
    }

    &:hover {
      .occlusion {
        display: block;
      }
    }
  }
}
</style>
